<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>学生进度</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/style/admin.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/style/template.css}" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <!-- 搜索条件开始 -->
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">学号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="studentNumber" placeholder="请输入" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">选择班级</label>
                    <div class="layui-input-inline">
                        <select name="classes" lay-filter="demo" lay-verify="required">
                            <option>请选择标签</option>
                            <option th:each="i,c:${classes}"
                                    th:value="${c.current}">[[${c.current}]]
                            </option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="student-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                </div>
            </div>
        </div>
        <!-- 搜索条件结束 -->

        <div class="layui-card-body">
            <!--表单主体部分-->
            <table id="studentInfoList" lay-filter="studentInfo">

            </table>
        </div>
    </div>
</div>

<script th:src="@{/static/layuiadmin/layui/layui.js}"></script>
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'contlist', 'table', 'laypage', 'upload', 'layer', 'laydate', 'jquery', 'form'], function () {
        var $ = layui.$
            , table = layui.table
            , form = layui.form
            , upload = layui.upload
            , layer = layui.layer;

        var laypage = layui.laypage;

        //方法级渲染
        table.render({
            elem: '#studentInfoList'
            , id: 'studentInfoList'
            , url: ''
            , title: '班级通知列表'
            // ,toolbar: '#bwgzfkToolBar'
            , cellMinWidth: 200
            , page: true
            , limit: 7
            , height: 'full-221'
            , cols: [
                [
                    {checkbox: true, fixed: true}
                    , {type: 'id', field: 'num', title: '学号', width: 150, fixed: 'left', align: "center"}
                    , {field: 'classes', title: '班级', width: 100, align: 'center'}
                    , {field: 'name', title: '姓名', width: 150, align: 'center'}
                    , {field: 'loginTime', title: '最后一次登录时间', width: 150, align: 'center'}
                    , {title: '操作', toolbar: '#table-content-list', width: 220, align: 'center'}
                ]
            ]
            , parseData: function (res) {
                return {
                    "code": 0,
                    "msg": res.msg,
                    "data": res.payload.content, //返回值 json 的key
                    "count": res.payload.total
                }
            }
        });

        // 监听搜索
        /**
         *！！！ 搜索事件
         */
        form.on('submit(student-search)', function (data) {
            table.reload('studentInfoList', {
                url: '/back/conditionSearch',
                method: 'post',
                page: {
                    curr: 1 //从第一页开始
                },
                where: { //where 是指你要往后台发送的参数的键值对，可以不加key
                    studentNumber: data.field.studentNumber,
                    name: data.field.name,
                    classes: data.field.classes
                }
            });
        });

        // 修改和删除等操作
        //监听行工具事件
        table.on('tool(studentInfo)', function (obj) {
            const data = obj.data;
            const studentNumber = data.num;

            if (obj.event === 'del') {
                // 删除信息
                layer.confirm('真的要删除这一行么', function (index) {
                    $.ajax({
                        type: 'GET',
                        async: true,
                        url: "/back/delStudent",
                        dataType: 'JSON',
                        data: {
                            studentNumber: studentNumber
                        },
                        success: function (res) {
                            if (res.code === 200) {
                                layer.msg(res.msg, {time: 1000, icon: 5})
                            } else {
                                layer.msg('删除成功', {
                                    time: 1000, icon: 6
                                })
                                location.reload()
                            }
                        },
                        error: function (data) {
                            layer.msg("删除时发生错误，请重试...", {time: 1000, icon: 7})
                            return false;
                        }
                    })
                    obj.del();
                    layer.close(index);
                });

            } else if (obj.event === 'edit') {
                //编辑信息
                layer.open({
                    type: 2,
                    title: '修改学生信息',
                    maxmin: true,
                    shadeClose: true, //点击遮罩关闭
                    content: '/back/toEditStudent/' + studentNumber,
                    area: screen() < 1 ? ['90%', '450px'] : ['760px', '480px']
                    , btn: ['修改', '取消']
                    , yes: function (index, layero) {
                        const iframeWindow = window['layui-layer-iframe' + index]
                            , submitID = 'submit'
                            , submit = layero.find('iframe').contents().find('#' + submitID);
                        //监听提交
                        iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                            const field = data.field; //获取提交的字段

                            //号码的正则表达式
                            let phonereg = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
                            const phone = phonereg.test(field.phone);

                            if (!phone) {
                                alert("请输入正确手机号");
                            }
                            else if (field.sex != "男" && field.sex != "女") {
                                alert("性别只有男女呦~");
                            } else {
                                $.ajax({
                                    type: "POST",
                                    url: "/back/updateStudent",
                                    dataType: 'JSON',
                                    async: false,
                                    data: field,
                                    success: function (res) {
                                        if (res.code === 200) {
                                            layer.msg(res.msg, {time: 1000, icon: 5})
                                        } else {
                                            layer.msg('修改成功', {
                                                icon: 6, time: 2000, end: function () {
                                                    var index = parent.layer.getFrameIndex(window.name);
                                                    parent.layer.close(index)
                                                }
                                            })
                                        }
                                    },
                                    error: function (data) {
                                        layer.msg("修改时发生错误，请重试...", {time: 1000, icon: 7})
                                    }
                                });
                            }
                            table.reload('studentInfoList'); //数据刷新
                            table.reload('studentInfoList'); //数据刷新
                            layer.close(index)
                        });
                        submit.trigger('click');
                    }
                })
            }
        })

        //判断浏览器大小方法
        function screen() {
            //获取当前窗口的宽度
            var width = $(window).width();
            if (width > 768) {
                return 1;   //小屏幕
            } else {
                return 0;   //超小屏幕
            }
        }

        $('.layui-btn.layuiadmin-btn-list').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });
</script>
</body>
</html>
